
<template>
	<view>		
		<view class="card">
			<view class="item">
				<text>+86</text>
				<input type="text" v-model="phone" placeholder="请输入手机号" />
			</view>
			<view class="item">
				<input type="text" v-model="yzm" placeholder="短信验证码" />
				<view class="yzm" @tap="sendMsg" style="z-index: 9999;">{{tip}}</view>
			</view>
		</view>
		<view class="confirm02" @tap="rePass">确定</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				yzm:'',
				pwd:'',
				pwd2:'',
				tip:'获取验证码',
				sms:false,
				working:false,				
			}
		},
		methods: {
			
			rePass(){
			var that = this;
			     
				if(!that.phone || !that.yzm )
				{
					that.Msg.Fail('请输入完整信息');
					return
				}
			
				// if(that.pwd1!=that.pwd)
				// {
				// 	that.Msg.Fail('2次密码不一致');
				// 	return
				// }
				that.Net._get('bd',{phone:that.phone,code:that.yzm},(res)=>{
					if(res.code ==1){
						that.Msg.Success('绑定成功',()=>{
						uni.navigateBack({
							
						})
						})
					}
				});
			},			
			sendMsg(){
				console.log(11)
				let me = this;
				let phone = me.phone;
				if(!me.phone)
				{
					me.Msg.Fail('请填写手机号')
					return
				}
				
				
			me.sec = 59;
	
			
			me.Net._get('code',{phone:me.phone,event:'reg'},(res)=>{
				if(res.code ==1){
					me.Msg.Success('发送成功')
					me.timer = setInterval(()=>{
						me.sec = me.sec - 1;
						if(me.sec<=1){
							me.tip ="重发验证码"
							clearInterval(me.timer)
						}else{
							me.tip = `${me.sec}秒后重发`
						}
					},1000)	
				}
			});
				// if(phone=='' || phone == null || !me.He.mobile(phone)){
				// 	me.He.Fail('请输入正确的手机号')
				// 	me.sms = false;
				// 	return false;
				// }
			
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f8f8f8;
	}
	.card{
		width: 92%;
		margin-left: 4%;
		border-radius: 25rpx;
		background-color: #fff;
		box-shadow: 0 0 15rpx #d3d3d3;
		display: inline-block;
		margin-top: 5vw;
		.item{
			width: 92%;
			margin: 0 auto;
			border-bottom: 1px solid #eee;
			position: relative;
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			text{
				margin-right: 5vw;
			}
			input{
				flex:1;
				height: 40px;				
			}			
			.yzm{
				position: absolute;
				right: 10px;
				top: 30rpx;
				border: 1px solid #4d726f;
				padding: 5px;
				border-radius: 5px;
				color: #4d726f;
				font-size: 12px;
			}
		}
	}
	.btn{
		width: 80vw;		
		background-color: #4d726f;
		border: none;
		color: #fff;
		text-align: center;
		margin: auto;
		margin-top: 10vh;
		padding: 10px 0px;
		border-radius: 5px;
	}
</style>
